<template>
    <div class="asset-container">
      <el-card class="box-card" style="margin-top: 20px">
        <div slot="header" class="clearfix">
          <span style="color: #409EFF">首页 / 订单管理</span>
          <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
        </div>
        <div class="text item">
          <div class="search_form">
            <el-form ref="form" :model="searchForm" label-width="80px">
              <el-form-item label="手机号：">
                <el-input style="width: 300px" v-model="searchForm.msisdn" placeholder="请输入手机号"></el-input>
                <el-button icon="el-icon-search" @click="loadData" style="margin-left: 20px" type="primary">查询</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>

      </el-card>


      <el-table
          ref="multipleTable"
          :data="orderList"
          tooltip-effect="dark"
          style="margin-top:50px; width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="100">
        </el-table-column>
        <el-table-column
            prop="orderId"
            label="订单号">
        </el-table-column>
        <el-table-column
            prop="username"
            label="姓名">
        </el-table-column>
        <el-table-column
            prop="msisdn"
            label="手机号">
        </el-table-column>
        <el-table-column
            prop="skuName"
            label="房型">
        </el-table-column>
<!--        <el-table-column-->
<!--            prop="isRNS"-->
<!--            label="是否实名制">-->
<!--          <template slot-scope="scope">-->
<!--            <el-tag v-if="scope.row.isRNS === '1'" type="success">是</el-tag>-->
<!--            <el-tag v-else type="danger">否</el-tag>-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column
            prop="fee"
            label="订单金额">
        </el-table-column>
        <el-table-column
            prop="channelName"
            label="下单渠道">
        </el-table-column>
        <el-table-column
            prop="status"
            label="订单状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status === 'S'" type="success">已付款</el-tag>
              <el-tag v-else-if="scope.row.status === 'U'" type="info">待付款</el-tag>
              <el-tag v-else-if="scope.row.status === 'F'" type="danger">异常</el-tag>
              <el-tag v-else-if="scope.row.status === 'C'" type="info">已退款</el-tag>
            </template>
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="下单时间"
            width="200">
          <template slot-scope="scope">{{ scope.row.createTime }}</template>
        </el-table-column>
        <el-table-column
            prop=""
            label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
            <el-button @click="handleClick(scope.row)" type="text" size="small" style="color: red">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
</template>

<script>
import busiApi from "../../../api";
export default {
    name: 'Asset',
    components: {
        
    },
    data() {
        return {
          searchForm: {
            msisdn: '',
            date: ''
          },
          orderList: [],
          multipleSelection: [] // 选中的记录
        }
    },
    created() {
        // 获取路由参数
        console.log('账户中心路由参数：', this.$route.query)
        let msisdn = this.$route.query.msisdn
        let activeFlag = this.$route.query.activeFlag
        if(msisdn && activeFlag) {
          // 用户中心跳转过来的激活缴费
          this.search.MSISDN = msisdn
          this.activeFlag = true
          this.loadData()
        }
    },
    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleClick(item) {
        console.log('当前操作记录：', item)
      },
      loadData() {
        if(!this.searchForm.msisdn) {
          this.$message.error('请输入手机号')
          return
        }
        busiApi.queryOrderByMsisdn({msisdn: this.searchForm.msisdn}).then(res => {
          console.log(res)
        })
      }
    }
}
</script>

<style lang="less">
    .filter-card {
        margin-bottom: 30px;
    }
    .list-table {
        margin-bottom: 30px;
    }
    .article-cover {
        width: 100px;
        background-size: cover;
    }
</style>